<template>
	<view @click="navigate('/page_other/work/my_detail?id='+detail.id)" class="work-item-send-com">
		<view class="name-block">
			<view class="valuation">{{valuationText.name}}</view>
			<view class="name">{{detail.name}}</view>
			<view class="process_status">{{detail.process_status_text}}</view>
		</view>
		<view class="time">开工日期：{{detail.start_time_text}}</view>
		<view class="time">完工日期：{{detail.end_time_text||'--'}}</view>
		<view class="price"><text class="number">{{detail.price}}</text>{{detail.price_text}}</view>
	</view>
</template>

<script>
	export default{
		name:'WorkItemSend',
		data(){
			return{
			}
		},
		props:{
			detail:{
				type:Object,
				default:()=>{
					return {valuation:1,name:'',start_time_text:'',end_time_text:'',price:'',price_text:''}
				}
			}
		},
		computed:{
			valuationText(){
				let obj={}
				switch(this.detail.valuation){
					case 1:
						obj={name:'短期工',unit:'元/天'};
						break;
					case 2:
						obj={name:'小时工',unit:'元/时'};
						break;
					case 3:
						obj={name:'计件工',unit:'元/100件'};
						break;
					default:
						obj={name:'短期工',unit:'元/天'};
				}
				return obj
			}
		}
	}
</script>

<style lang="scss" scoped>
	.work-item-send-com{
		background: #fff;
		border-radius: 12px;
		padding: 30rpx;
		margin-bottom: 30rpx;
		width: 100%;
		.name-block{
			width: 100%;
			display: flex;
			align-items: center;
			.valuation{
				width: 100rpx;
				border-radius: 4px;
				color:#fa9b17;
				background: #fcf2d8;
				font-size: 24rpx;
				padding: 2px 7px;
				margin-right: 20rpx;
				text-align: center;
			}
			.name{
				width: calc(100% - 220rpx);
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
			.process_status{
				color: #fa9b17;
			}
		}
		.time{
			margin-top: 30rpx;
			color: #757575;
			font-size: 28rpx;
		}
		.price{
			margin-top: 30rpx;
			color: #fa9b17;
			font-size: 24rpx;
			.number{
				font-size: 32rpx;
			}
		}
	}
</style>